<template>
  <div class="SearchView">
    <!-- 搜索框 -->

    <van-search
      v-model="searchVal"
      show-action
      :autofocus="true"
      placeholder="理想家"
      @input="onSearch"
      @cancel="onCancel"
    />

    <!--搜索列表 -->
    <search-list :searchList="searchList" v-show="searchVal"></search-list>
    <!-- 搜索点击后出现的内容渲染 -->
    <router-view :key="$route.fullPath"></router-view>
    <!-- 搜索历史 -->
    <div class="searchHistory-box">
      <van-divider
        :style="{ color: '#333', fontSize: '12px', fontWeight: '600' }"
        >搜索历史</van-divider
      >
      <div>
        <p
          class="searchHistory-item"
          v-for="(item, index) in searchHistory"
          :key="index"
        >
          {{ item }}
        </p>
      </div>
    </div>
    <!-- 热门搜索 -->
    <div class="hotText">
      <van-divider
        :style="{ color: '#333', fontSize: '12px', fontWeight: '600' }"
        >热门搜索</van-divider
      >
      <ul>
        <li
          @click="HotTextSearch(item.name)"
          v-for="item in hotText"
          :key="item.name"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { hotText, searchText } from "../api/request";
import SearchList from "@/components/SearchView/SearchList.vue";
export default {
  name: "SearchView",
  components: {
    SearchList,
  },
  data() {
    return {
      hotText: [],
      searchVal: "",
      searchList: [],
      // 搜索历史
      searchHistory: [],
      // 判断搜索内容是否出现
      contentShow: true,
    };
  },
  mounted() {
    this.$nextTick(() => {
      // 接收来自ListItem 列表点击事件传来的name然后设置为input框内容
      this.$bus.$on("inputVal", (data) => {
        console.log("接收", data);
        this.searchVal = data;
        this.searchHistory.push(data);
        console.log(this.searchHistory);
      });
      this.getcs();
    });
  },

  methods: {
    // 取消按钮返回
    onCancel() {
      this.$router.push("/");
    },
    // 搜索历史
    // 热门搜索
    getcs() {
      hotText().then(({ data }) => {
        this.hotText = data.data.hot_keyword;
        // console.log(this.hotText);
      });
    },
    // 输入框输入时
    onSearch() {
      searchText({ keyword: this.searchVal }).then(({ data }) => {
        this.searchList = data.data;
        // console.log(this.searchList);
      });
    },
    // 热门搜索点击传到输入框
    // HotTextSearch(text) {
    //   this.searchVal = text;
    // },
  },
  watch: {
    searchVal(newVal, oldval) {
      // 监测输入框 变化了则隐藏内容 然后等到再次点击别的搜索关键词再改为true
      // console.log(newVal, oldval);
      if (newVal !== oldval) {
        this.contentShow = false;
      } else {
        this.contentShow = true;
      }
      this.$bus.$emit("contentShow", this.contentShow);
    },
  },
};
</script>

<style lang="scss" scoped>
.SearchView {
  height: 100vh;
  padding: 0 0.875rem;

  // background-color: #fbfbfb;
  // 搜索样式
  .van-search {
    width: 100%;
    background-color: var(--bgcColor);
    box-sizing: border-box;
    .van-search__content {
      background-color: white;
      box-shadow: 1px 1px 6px #eee;
    }
  }
  // 热门搜索
  .hotText {
    height: 6.25rem;
    ul {
      width: 100%;
      height: 100%;
      padding: 0 2.5rem;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;

      li {
        font-size: 0.8125rem;
        background-color: #f3f4f6;
        padding: 0.375rem;
        box-sizing: border-box;
      }
    }
  }
  .searchHistory-box {
    > div {
      display: flex;
      flex-wrap: wrap;
    justify-content: center;
      .searchHistory-item {
        font-size: 0.75rem;
        padding: 0.375rem;
        box-sizing: border-box;
        line-height: 1rem;
        background-color: #f3f4f6;
        margin: .375rem;
      }
    }
  }
}
</style>